<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>买！现在就买！</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/icon/favicon.png}">
    <th:block th:insert="~{/fixed/header::head}"></th:block>
</head>

<script>
    $(function (){
        //添加购物车按钮点击事件
        $("#insertCart").click(function (){
            let gid = $("#gid").text();
            //向后端发送请求
            $.ajax({
                url:"/cart/insertCart",
                method:"POST",
                data:{"gid":gid},
                success:function (data){
                    if (data){
                        location.href = "/cart";
                    }else {
                        alert("添加失败，库存不足")
                    }
                }
            })
        })
    })
</script>

<body>
<th:block th:insert="~{/fixed/headBar::headBar}"></th:block>
<main>
    <!-- Hero area Start-->
    <div class="hero-area section-bg2">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="slider-area">
                        <div class="slider-height2 slider-bg4 d-flex align-items-center justify-content-center">
                            <div class="hero-caption hero-caption2">
                                <h2>商品详情</h2>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb justify-content-center">
                                        <li class="breadcrumb-item"><a th:href="@{/index}">主页</a></li>
                                        <li class="breadcrumb-item"><a id="gid" th:text="${goods.getGid()}"></a></li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  Hero area End -->

    <!--  services-area start-->
    <div class="services-area2 pt-50" style="padding-bottom: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-12">

                            <!-- 商品详情提交的form表单 -->
                            <form>
                                <!-- 商品框开始 -->
                                <div class="single-services d-flex align-items-center mb-0">
                                    <!-- 商品图片 -->
                                    <div class="features-img">
                                        <img style="width: 20rem;" th:src="'http://localhost:8888' + ${goods.getGoodsImg()}">
                                    </div>
                                    <!-- 商品信息 -->
                                    <div class="features-caption">
                                        <h3 th:text="${goods.getGoodsName()}"></h3>
                                        <p th:text="${goods.getGoodsDescribe()}"></p>
                                        <p th:text="'剩余库存：' + ${goods.getGoodsStock()}"></p>
                                        <div class="price">
                                            <span th:text="${'￥' + goods.getGoodsPrice()}"></span>
                                        </div>
                                        <div class="review">
                                            <div class="rating">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star-half-alt"></i>
                                            </div>
                                            <p>(120 Review)</p>
                                        </div>
                                        <button style="top: -20px;" id="insertCart" type="button" class="white-btn mr-10">添加到购物车</button>
                                        <a class="border-btn share-btn"><i class="fas fa-share-alt"></i></a>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- services-area End-->
</main>
<!-- Books review End -->

<th:block th:insert="~{/fixed/footBar::footBar}"></th:block>

<th:block th:insert="~{/fixed/footer::foot}"></th:block>

</body>
</html>